<template>
	<view>
		<block v-if="list.length > 0">
			<view class="head">
				<view class="head-btn" v-if="mode == 'cart'" @click="mode = 'del'">
					<image src="../static/shop/set.png" mode=""></image>
					<text>管理</text>
				</view>
				<view class="head-btn" v-else @click="mode = 'cart'">
					<image src="../static/shop/success.png" mode=""></image>
					<text>完成</text>
				</view>
			</view>

			<view class="m-cart-list">
				<view class="m-item" v-for="(item,index) in list" :key="item.inventoryId">
					<view class="m-item-radio" @click="selectItemFun(item)">
						<image src="../static/hotel/radio-select.png" v-if="item.selected" mode=""></image>
						<image src="../static/hotel/radio.png" mode="" v-else></image>
					</view>
					<view class="m-item-image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="m-item-content">
						<view class="m-item-font1 u-line-1">
							<text>{{item.title}}</text>
						</view>
						<view class="m-item-font2">
							<text>{{item.key_vals}}</text>
						</view>
						<view class="m-item-bottom">
							<text class="m-item-price">{{item.price_sale}}</text>
							<m-number-box bgColor="#fff" :value="item.num" :index="index"
								@change="numberChangeFun($event,item)" :min="1"></m-number-box>
						</view>
					</view>
				</view>
			</view>

			<view class="m-bottom-empty safe-area-inset-bottom"></view>
			<view class="m-bottom safe-area-inset-bottom">
				<view class="m-bottom-left">
					<view class="m-bottom-radio" @click="selectAllFun">
						<image v-if="allSelected" src="../static/hotel/radio-select.png" mode=""></image>
						<image v-else src="../static/hotel/radio.png" mode=""></image>
						<text>全选</text>
					</view>
					<text class="u-m-l-40" v-if="mode=='cart'">合计</text>
					<text class="m-bottom-price" v-if="mode=='cart'">{{totalPrice}}</text>
				</view>
				<view class="m-bottom-right">
					<view class="m-bottom-btn" v-if="mode=='cart'" @click="submitFun">
						<text>提交订单</text>
					</view>
					<view class="m-bottom-del" @click="delFun" v-else>
						<text>删除</text>
					</view>
				</view>
			</view>
		</block>

		<block v-else>
			<view class="m-empty">
				<image src="../static/shop/cart-empty.png" mode=""></image>
				<text>购物车空空如也~</text>
			</view>
			<view class="m-title">
				<text>猜你喜欢</text>
			</view>
			<view class="m-list">
				<view class="m-item" v-for="(item,index) in goodsList" :key="index"
					@click="to_link('/pages2/shop-detail/shop-detail?id='+item.inventoryId)">
					<view class="m-item-image">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="m-item-title u-line-2">
						<text>{{item.title}}</text>
					</view>
					<view class="m-item-bottom">
						<text class="m-item-left">{{item.price_sale}}</text>
						<view class="m-item-right">
							<image src="@/static/shop/shop-goods-cart.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {debounce2} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				mode: 'cart', //cart del
				allSelected:false,
				totalPrice:0,
				
				list: [],
				goodsList:[]
			}
		},
		onLoad() {
			this.getGoodsFun()
		},
		onShow() {
			this.getListFun()
		},
		methods: {
			submitFun(){
				let data = this.list.filter(item=>{
					return item.selected
				})
				if(data.length == 0){
					this.$m.msg('请选择商品')
					return false;
				}
				let product_info = []
				let list = []
				data.forEach(item=>{
					product_info.push({
						"inventoryId": item.inventoryId,
						"productId": item.productId,
						"num": item.num,
					})
					list.push({
						image: item.image,
						title: item.title,
						key_vals:item.key_vals,
						price_sale: item.price_sale,
						num: item.num
					})
				})
				uni.setStorageSync('orderCreateInfo',list)
				this.to_link('/pages2/shop-confirm/shop-confirm?product_info='+JSON.stringify(product_info))
			},
			numberChangeFun({
				value,
				index
			}, item) {
				if (item.num == value) return
				// 记录一个节流函数句柄
				if (!item.debounceHandle) {
					item['oldValue'] = item.num
					item['debounceHandle'] = debounce2(this.updateCartFun, 500)
				}
				// 更新商品数量
				item.num = value
				// 提交更新购物车数量 (节流)
				item.debounceHandle(item, item.oldValue, value)

			},
			updateCartFun(item, oldValue, newValue) {
				this.$http.getJson('gouwuche_updateNum', {
					inventoryId: item.inventoryId,
					num: item.num
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						// 清除节流函数句柄
						item.debounceHandle = null
					} else {
						item['num'] = oldValue
						this.$m.msg(res.message)
					}

				})
			},
			selectAllFun(){
				this.allSelected = !this.allSelected
				this.list.forEach((item)=>{
					item.selected = this.allSelected
				})
				this.setDataFun()
			},
			selectItemFun(item){
				item.selected = !item.selected
				this.setDataFun()
			},
			setDataFun(){
				let allSelected = true
				let price = 0
				this.list.forEach(item=>{
					if(!item.selected){
						allSelected = false
					}else{
						price += Number(item.num)*Number(item.price_sale)
					}	
				})
				this.allSelected = allSelected
				this.totalPrice = price.toFixed(2)
				
				
			},

			getListFun() {
				this.$http.getJson('gouwuche_lists').then(res => {
					if (res.code == 1) {
						let list = res.data || []
						list.forEach(item => {
							item['selected'] = false
						})
						this.list = list
						this.setDataFun()
					}
				})
			},
			delFun(){
				let arr = []
				this.list.forEach(item=>{
					if(item.selected){
						arr.push(item.inventoryId)
					}
				})
				if(arr.length == 0){
					return this.$m.msg('请选择商品')
				}
				this.$http.getJson('gouwuche_del',{inventoryId:arr.join()}).then(res=>{
					if(res.code == 1){
						this.getListFun()
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			getGoodsFun(){
				this.$http.getJson('product_plist',{page:1,pagenum:10}).then(res=>{
					if(res.code == 1){
						let list = res.data || []
						this.goodsList = list
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.head {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 30rpx 25rpx;

		.head-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #D3CECA;
			font-size: 24rpx;
			color: #34302D;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 8rpx;
			}
		}
	}

	.m-empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #ADAAA5;
		padding-top: 200rpx;

		image {
			width: 320rpx;
			height: 260rpx;
			margin-bottom: 30rpx;
		}
	}

	.m-cart-list {
		padding: 0 25rpx;

		.m-item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1px solid #E6E3DE;

			.m-item-radio {
				display: flex;
				align-items: center;
				width: 54rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.m-item-image {
				width: 180rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.m-item-content {
				width: 450rpx;
				margin-left: 20rpx;

				.m-item-font1 {
					font-size: 30rpx;
					color: #462E1A;
					font-weight: 600;
					line-height: 42rpx;
				}

				.m-item-font2 {
					font-size: 24rpx;
					color: #9A958F;
					line-height: 33rpx;
					height: 33rpx;
					margin-top: 10rpx;
				}

				.m-item-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 23rpx;

					.m-item-price {
						font-size: 40rpx;
						color: #DE2C38;

						&::after {
							content: '积分';
							font-size: 24rpx;
							color: #76706B;
							margin-left: 4rpx;
						}
					}
				}
			}
		}
	}

	.m-bottom-empty {
		width: 750rpx;
		height: 120rpx;
		box-sizing: content-box;
	}

	.m-bottom {
		position: fixed;
		bottom: 0;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0, 0, 0, 0.06);

		.m-bottom-left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #33302D;

			.m-bottom-radio {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #33302D;
				padding-left: 25rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 16rpx;
				}
			}

			.m-bottom-price {
				font-size: 40rpx;
				color: #DE2C38;
				margin-left: 12rpx;

				&::after {
					content: '积分';
					font-size: 24rpx;
					color: #76706B;
					margin-left: 4rpx;
				}
			}
		}

		.m-bottom-right {
			display: flex;
			padding-right: 25rpx;

			.m-bottom-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				height: 88rpx;
				background: #D3A358;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 32rpx;
				color: #fff;
			}

			.m-bottom-del {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				height: 88rpx;
				background: #DE2C38;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.m-title {
		display: flex;
		align-items: center;
		padding: 200rpx 25rpx 30rpx;
		font-size: 30rpx;
		color: #34302D;
		font-weight: 600;
	}

	.m-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0rpx 25rpx 0;

		.m-item {
			width: 340rpx;

			.m-item-image {
				width: 340rpx;
				height: 340rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.m-item-title {
				margin-top: 20rpx;
				height: 80rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #34302D;
			}

			.m-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				padding-bottom: 48rpx;

				.m-item-left {
					font-size: 40rpx;
					color: #DE2C38;

					&::after {
						content: '积分';
						font-size: 24rpx;
						color: #76706B;
						margin-left: 5rpx;
					}
				}

				.m-item-right {
					width: 44rpx;
					height: 44rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>